<!--
 * @Date: 2019-12-08 10:38:22
 * @LastEditors: 黄栋
 * @LastEditTime: 2020-03-26 10:00:17
 * @FilePath: /GIV/src/native/app/selling/selling_categories.vue
 -->
<template>
<div>
  <head title="Categories"></head>

  <div style="flex:1;">
    <div class="category-list">
      <!-- 左侧分类导航 -->
      <scroller class="scrollerleft">
        <div
          class="leftrow"
          v-for="(category,indexc) in itemList"
          :key="category.id"
          :class="[indexc== leftId?'leftrowon':'']"
          @click="showCategory(indexc)"
        >
          <div class="lefttext">
            <text class="cateName">{{category.name}}</text>
          </div>
        </div>
      </scroller>
      <scroller class="scrollerright">
        <!-- 右侧子导航 -->
        <div v-for="(item,indexs) in itemList" :key="item.id">
            
          <div class="categoryList" v-if="indexs==leftId">
            <div class="catelist" v-for="(box,i) in item.two" :key="i">
              <text class="catetext">{{box.name}}</text>
              <div class="listBox">
                <div
                  class="listitem"
                  v-for="(itemc,index) in box.three"
                  :key="index"
                  @click="select(itemc)"
                >
                  <image class="itemImg" :src="itemc.thumb" />
                  <text class="itemName">{{itemc.name}}</text>
                </div>
                <div class="listitema"></div>
                <div class="listitema"></div>
              </div>
            </div>
          </div>
        </div>
      </scroller>
    </div>
  </div>
</div>
</template>
<script>
import { get_category_list, get_all_category_list } from "../../mixin/ajax";

export default {
  props: {
    userId: {
      default: ""
    }
  },
  data() {
    return {
      tabCurrentIndex: 0,
      showCategoryIndex: 0,
      leftId: 0,
      typeClass: "used",
      parentid: "",
      refreshing: false,
      itemList: [],
      //分类列表
      categoryList: []
    };
  },
  created() {
    var pref = weex.requireModule("storage");
    let that = this;
    pref.getItem("categroy1", event => {
      if (event.result == "success") {
        that.itemList = JSON.parse(event.data);
      } else {
        that.getGoodList();
      }
    });
  },
  methods: {
    onrefresh(event) {
      let that = this;
      that.loadData();
    },
    getGoodList(type) {
      get_all_category_list({ type: 1 }, (res, flag) => {
        this.refreshing = false;
        if (flag) {
          let list = res.data;
          var pref = weex.requireModule("storage");
          pref.setItem("categroy1", JSON.stringify(list));
          that.itemList = list;
        }
      });
    },
    switchType(type) {
      if (this.typeClass == type) {
        return;
      }
      this.typeClass = type;
    },
    select(item) {
      
      const selectCategary = new BroadcastChannel("selectCategary");
      selectCategary.postMessage(item);
      this.back();
    },
    tabClick(index) {
      if (this.tabCurrentIndex == index) {
        return false;
      }
      this.tabCurrentIndex = index;
      // this.getGoodList("tabChange");
    },
    slideChange(index) {
      if (this.tabCurrentIndex == index.index) {
        return false;
      }
      this.tabCurrentIndex = index.index;
    },
    //分类切换显示
    showCategory(index, id) {
      // this.showCategoryIndex = index;
      this.leftId = index;

      // this.parentid = id;
      // this.getGoodList();
    },
    toCategory(e) {},
    //搜索跳转
    toSearch() {}
  }
};
</script>
<style scoped>
.tabr {
  height: 100px;
  width: 700px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.tabItem {
  height: 70px;
  width: 280px;

  padding: 0 2px;
  justify-content: center;
  align-items: center;
}

.navbar {
  height: 90px;
  width: 750px;
  flex-direction: row;
}

.nav-item {
  height: 90px;
  padding: 0 20px;
  margin: 0 30px;
  line-height: 90px;
  font-size: 30px;
  color: #333333;
}

.current {
  border-bottom-color: #ba8833;
  border-bottom-width: 4px;
  border-bottom-style: solid;
  color: #ba8833;
}

.slider {
  flex: 1;
  position: relative;
  width: 750px;
  display: flex;
  /* background-color: #41EFF2; */
}

.sliderContent {
  width: 750px;
  position: absolute;
  background-color: #fff;
  flex: 1;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}

.off {
  line-height: 70px;
  height: 70px;
  /* border-bottom-width: 8px; */
  /* border-bottom-color: #FFF; */
  /* border-bottom-style: solid; */

  font-size: 30px;
}

.on {
  border-bottom-width: 8px;
  border-bottom-color: #ba8833;
  border-bottom-style: solid;
  color: #ba8833;
  line-height: 70px;
  font-size: 30px;
  height: 70px;
}

.iconfont {
  font-family: iconfont;
}

.leftIcon {
  color: #ffffff;
  font-size: 40px;
}

.layout {
  background-color: #f2f2f2;
  flex: 1;
  /* background-color: #000000; */
}

.scroller {
  flex: 1;
  background-color: #f06c7a;
}

.header {
  width: 750px;
  height: 100px;
  display: flex;
  align-items: center;
  flex-direction: row;
  background-color: #fafafa;
  justify-content: center;
}

.maskClack {
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.refresh {
  justify-content: center;
  align-items: center;
}
.indicator {
  width: 40px;
  height: 40px;
  margin: 10px;
}
.input-box {
  width: 600px;
  height: 60px;
  background-color: #f5f5f5;
  border-radius: 30px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
}

.input {
  padding-left: 28px;
  height: 28px;
  font-size: 28px;
  background-color: #f5f5f5;
}

.iconSearch {
  margin-right: 15px;
  font-size: 30px;
  color: #999;
}

.category-list {
  flex: 1;
  /* background-color:#02993C; */
  flex-direction: row;
}

.scrollerleft {
  /* flex: 2; */
  background-color: #f2f2f2;
  padding: 0;
  position: absolute;
  width: 213px;
  bottom: 0;
  left: 0;
  top: 0;
}

.leftrow {
  widows: 213px;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f2f2f2;
}

.leftrowon {
  height: 90px;
  background-color: #fff;
  border-left-width: 4px;
  border-left-style: solid;
  border-left-color: #ba8833;
}

.lefttext {
  flex: 1;
  font-size: 26px;
  display: flex;
  justify-content: center;
  color: #3c3c3c;
  align-items: center;
}
.cateName {
  font-size: 26px;
  text-align: center;
}

.scrollerright {
  /* flex: 5; */
  position: absolute;
  width: 537px;
  bottom: 0;
  left: 213px;
  top: 0;
}

.categoryList {
  width: 537px;
  background-color: #f2f2f2;
}

.catelist {
  width: 537px;
  background-color: #FFF;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.catetext {
  width: 537px;
  text-align: center;
  font-size: 30px;
  margin-bottom: 15px;
}

.listBox {
  width: 537px;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: wrap;
}

.listitema {
  width: 170px;
}

.listitem {
  width: 170px;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 15px;
}

.itemImg {
  width: 130px;
  height: 130px;
  background-color: #f2f2f2;
  margin-bottom: 10px;
}

.itemName {
  width: 170px;
  text-align: center;
  font-size: 18px;
}

.catebanner {
  border-radius: 10px;
}

.block {
  position: absolute;
  width: 0px;
  left: 0;
}

.text {
  width: 200px;
  position: relative;
  font-size: 28px;
  display: flex;
  justify-content: center;
  color: #3c3c3c;
}

.block {
  width: 10px;
  height: 80%;
  top: 10%;
  background-color: #f06c7a;
}

.text {
  font-size: 30px;
  font-weight: 600;
  color: #2d2d2d;
}

.row {
  width: 200px;
  height: 90px;
  display: flex;
  align-items: center;
}

image {
  width: 100%;
}

.right {
  width: 76%;
  left: 24%;
}

.category {
  width: 550px;
}

.list {
  margin-top: 40px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.box {
  width: calc(71.44vw / 3);
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.text {
  margin-top: 5px;
  width: 100%;
  display: flex;
  justify-content: center;
  font-size: 26px;
}
</style>
